import React, { FC, useRef } from 'react'
import MyHead from '../../components/MyHead'
import { Button, Form, Input ,Toast} from 'antd-mobile'
import { Link} from 'react-router-dom'
import { reg } from '../../utils/validate'
import { Http } from '../../api'
import {  useNavigate } from 'react-router-dom'
import qs from 'qs';

const Register:FC<any> = () => {
  // 重置
  const [form] = Form.useForm()
  const formRef:any=useRef()
  const router = useNavigate()  //跳转
  
  // 失焦事件
  const checkDbPass=()=>{
    // 失焦时，调取某个字段的正则
    form.validateFields(['dbpass'])  //触发确认的校验
    console.log('12121');
  }
  // 校验成功
  const onFinish=async (value:any)=>{
    console.log(value);
    console.log(form.getFieldsValue());  //获取（拿到里面的值）
    let res:any = await Http.register(value)
    if (res.code==200) {
      value.from = 'rigister'
      router('/login?'+qs.stringify(value))
    }
    
  }
  // 校验失败
  const onFinishFailed=()=>{
      Toast.show({
        content: '请确认输入有效的注册信息',
      })
  }
  return (
    <div style={{background:"#ccc",height:"100%"}}>
      <MyHead title='注册账户'/>
      <div className="rbox" style={{margin:"20px 0"}}>
      <Form 
      onFinish={onFinish}
      onFinishFailed = {onFinishFailed}
      ref={formRef}  form={form} layout='horizontal' mode='card'
        footer={
          <div style={{width:'100%',display:'flex'}}>
            <Button style={{flex:1,margin:'0 10px'}} type='submit' color='success' size='large'>
              注册
            </Button>
            <Button
           style={{flex:1,margin:'0 10px'}}
              color='danger'
              onClick={() => {
               console.log(form);
               console.log(formRef);
               
               form.resetFields()
              // formRef.current.resetFields()
              }}
              size='large'
            >重置</Button>
            
          </div>
        }
      >
        <Form.Item label='用户名' name='username'  
          rules={[
            { required: true },
          ]}
        	>
          <Input placeholder='请输入用户名' clearable />
        </Form.Item>
        <Form.Item label='手机号' name='phone'
         rules={[
          { required: true },
          {pattern:reg.phone,message:"请输入有效的手机号"}
        ]}
        >
          <Input placeholder='请输入手机号' clearable />
        </Form.Item>
        <Form.Item label='密码' name='password'
         rules={[
          { required: true },
          {pattern:reg.pwd,message:"请输入6-16位的字母和数字组合的密码"}
        ]}
        >
          <Input onBlur={checkDbPass} placeholder='请输入密码' clearable type='password' />
        </Form.Item>
        <Form.Item label='确认密码' name='dbpass'
         rules={[
          { required: true },
          {pattern:reg.pwd,message:"请输入6-16位的字母和数字组合的密码"},
          {
            validator:(rule,value,callback)=>{
            console.log(value);
            console.log(form.getFieldValue('password'));
            if (reg.pwd.test(value) && reg.pwd.test(form.getFieldValue('password'))) {
              // 两次密码的正则通过才去比较是否一致
              // 比较两次密码是否一致
            if (value==form.getFieldValue('password')) {
              return Promise.resolve()  //Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。
            }else{
              return Promise.reject(new Error("两次密码不一样"));
            }
            }else{
              return Promise.resolve()
            }
            
            }
          }
        ]}
        >
          <Input placeholder='请输入确认密码' clearable type='password' />
        </Form.Item>
      

        <Form.Item>
          <div className="lines" style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <div className="item">
            <Link to="/login" style={{color:'pink'}}>去登录?</Link>
            </div>
            <div className="item">
            <Link to="/findpass" style={{color:'#f50'}}>找回密码?</Link>
            </div>
          </div>
        </Form.Item>
      </Form>
      </div>
    </div>
  )
}

export default Register